<template>
  <div>
    <el-container>
      <el-header>
               
        <router-link to="/blogs">
                 
          <img
            src="https://www.markerhub.com/dist/images/logo/markerhub-logo.png"
            style="height: 60%; margin-top: 10px"
          />
                 
        </router-link>
             
      </el-header>
      <el-main>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              maxlength="12"
              v-model="ruleForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
                       
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
                     
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        username: "markerhub",
        password: "111111",
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((vaild) => {
        if(vaild){
          this.$axios.post('/login',this.ruleForm).then((res)=>{
            // console.log(res.headers)
            // console.log(res.data)
            const token = res.headers['authorization']
              _this.$store.commit('SET_TOKEN', token)
              _this.$store.commit('SET_USERINFO', res.data.data)
              _this.$router.push("/blogs")
          })
        }else{
          console.log("错误的提交");
          return false
        }
      });
    },

    resetForm(formName) {
      
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
      this.$notify({
        title: '看这里：',
        message: '关注嘉然,顿顿解馋',
        duration: 1500
      });
    }

};
</script>
